<template>
    <div class="login-container">
        <Row type="flex" justify="center" align="middle" class="login-row">
            <Col span="12">
                <Card>
                    <Form ref="loginForm" :model="loginForm"  @submit.prevent="handleLogin">
                        <FormItem label="用户名" prop="username">
                            <Input v-model="loginForm.username" autocomplete="off"></Input>
                        </FormItem>
                        <FormItem label="密码" prop="password">
                            <Input type="password" v-model="loginForm.password" autocomplete="off"></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary"  html-type="submit">登录</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'LoginView',
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            }
            
        }
    },
    computed: {
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.$http.post('/login', this.loginForm).then(res => {
                        if (res.status == 'ok') {
                            this.$Message.success('登录成功');
                            let token = res.data;
                            localStorage.setItem('token', token);
                            this.$router.push({ path: '/' });
                        } else {
                            this.errorMessage(res.data);
                        }
                    });
                } else {
                    console.log('登录表单验证失败');
                    return false;
                }
            });
        }
    },
}
</script>

<style scoped>
    .login-container {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f2f2f2;
    }
    
    .login-row {
        width: 100%;
        max-width: 400px;
    }
    
    .login-extra {
        margin-top: 15px;
        text-align: center;
    }
    
    .login-extra span {
        margin-right: 10px;
        color: #999;
    }
</style>